<template>
  <div class="q-gutter-sm row items-center no-wrap">
    <q-btn
      round
      dense
      flat
      no-wrap
      v-if="$q.screen.gt.xs"
      color="text-grey-7"
      icon="apps"
      no-caps
      class="q-ml-sm q-px-md"
    >
      <q-tooltip>工作区</q-tooltip>
      <q-menu anchor="top end" self="top end">
        <q-list class="text-grey-8" style="min-width: 100px">
          <q-item aria-hidden="true">
            <q-item-section
              class="text-uppercase text-grey-7"
              style="font-size: 0.7rem"
              >选择工作区</q-item-section
            >
          </q-item>
          <q-item
            v-for="x in workplaces"
            :key="x.name"
            clickable
            v-close-popup
            aria-hidden="true"
            @click="onWorkplaceChange(x)"
          >
            <q-item-section avatar>
              <q-icon name="book" v-if="x.default" />
            </q-item-section>
            <q-item-section>
              {{ x.name }}
            </q-item-section>
          </q-item>
          <q-item clickable>
            <q-item-section avatar>
              <q-icon name="add" />
            </q-item-section>
            <q-item-section> 添加工作区 </q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
    <q-btn round dense flat color="grey-8" icon="notifications">
      <q-badge color="red" text-color="white" floating> 2 </q-badge>
      <q-tooltip>Notifications</q-tooltip>
    </q-btn>
    <q-btn round flat>
      <q-avatar size="26px">
        <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
      </q-avatar>
      <q-tooltip>Account</q-tooltip>
      <q-menu auto-close>
        <q-list dense>
          <q-item>
            <q-item-section>
              <div>
                当前用户 <strong>{{ account.phone }}</strong>
              </div>
            </q-item-section>
          </q-item>
          <q-separator />
          <q-item clickable>
            <q-item-section>个人设置</q-item-section>
          </q-item>
          <q-item clickable @click="onLogout()">
            <q-item-section>退出</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { invoke } from "@tauri-apps/api/tauri";
import { global_account, emitter, Endpoint } from "../boot/global_variable";

// 当前用户
class Account {
  constructor() {
    this.id = ""; //用户ID
    this.name = "";
    this.phone = "";
  }
}

const $q = useQuasar();
// 账号信息
const account = ref(Account);
// 工作目录
const workplaces = ref([]);

const onLoadAcount = async () => {
  const request = {
    url: Endpoint + "/api/v1/user/login",
    method: "POST",
    header: {
      "Content-Type": "application/json;charset=utf-8",
    },
    body: JSON.stringify({ phone: "13671621389", passwd: "abc" }),
  };
  console.log(request);
  await invoke("http_cmd", { request: request })
    .then((data) => {
      console.log("[RESULT]=>", data);
      account.value = JSON.parse(data.body);

      onLoadWorkplace(account.value.id);
    })
    .catch((error) => {
      console.log("[ERROR]=>", error);
    });

  // 本地模式
  // await invoke("account_cmd", {})
  //   .then((data) => {
  //     account.value = data;
  //     console.log("[account_cmd]=>", data);
  //     global_account.value = account.value;
  //   })
  //   .catch((error) => console.log("[account_cmd]=>", error));
};

const onLoadWorkplace = async (uid) => {
  const request = {
    url: Endpoint + "/api/v1/workplace/list",
    method: "POST",
    header: {
      "Content-Type": "application/json;charset=utf-8",
    },
    body: JSON.stringify({ user_id: uid }),
  };

  console.log(request);
  await invoke("http_cmd", { request: request })
    .then((data) => {
      console.log("[RESULT]=>", data);
      workplaces.value = JSON.parse(data.body);
      workplaces.value.forEach((ele) => {
        if (ele.default) {
          emitter.emit("workplace_changed", ele.id);
        }
      });
    })
    .catch((error) => {
      console.log("[ERROR]=>", error);
    });
};

const workplace_add = async (name) => {
  await invoke("workpalce_add_cmd", { name: name })
    .then(() => {
      // 重新加载workplace
      onLoadWorkplace();
    })
    .catch((error) => console.log("[layout_cmd]=>", error));
};

watch(global_account, async (new_account) => {
  onLoadWorkplace();
});

// 更新工作区
const onWorkplaceChange = async (workplace) => {
  emitter.emit("workplace_changed", workplace.id);
  console.log("[workplace_changed:emit]=>%s", workplace.id);
};

const onLogout = async () => {
  console.log("logout event ");
};

// 初始化账号
onLoadAcount();
</script>
